import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
      imports: ['vue'],
      // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
      resolvers: [
        ElementPlusResolver(),
      ],
      dts: 'src/auto-imports.d.ts',
    }),
    Components({
      // 自动导入组件的目录
      dirs: ['src/components'],
      // 自定义组件的解析器
      resolvers: [
        // 自动导入 Element Plus 组件
        ElementPlusResolver(),
        // 自动导入图标组件
        IconsResolver({
          enabledCollections: ['ep'], // element-plus 图标
        }),
      ],
      // 组件的有效文件扩展名
      extensions: ['vue', 'jsx', 'tsx'],
      // 生成类型声明文件
      dts: 'src/components.d.ts',
      // 是否搜索子目录
      deep: true,
      // 允许导入的自定义组件前缀
      include: [/\.vue$/, /\.vue\?vue/],
    }),
    Icons({
      autoInstall: true,
    }),
  ],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src')
    }
  },
  server: {
    port: 3000,
    open: true
  }
}) 